<template>
  <h2>标签</h2>
  <a-skeleton active :loading="loading" :paragraph="{ rows: 12 }">
    <template v-if="tagList.length > 0">
      <router-link
        v-for="tag in tagList"
        :key="tag.id"
        :to="`/tag/${tag.tag_name}`"
      >
        <a-tag class="tagtag">
          <template #icon>
            <a-badge :count="tag.tag_count" />
          </template>
          {{ tag.tag_name }}
        </a-tag>
      </router-link>
    </template>

    <template v-else>
      <a-empty />
    </template>
  </a-skeleton>
</template>

<script lang="ts">
import { tagService } from '@/api/tag';
import { TagDTO } from '@/bean/dto';
import { useAsyncLoading } from '@/hooks/async';
import { Badge, Tag } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';

export default defineComponent({
  components: {
    [Tag.name]: Tag,
    [Badge.name]: Badge,
  },
  setup() {
    const tagList = ref<TagDTO[]>([]);

    const handleGetTagList = async () => {
      const res = await tagService.All({ getCount: true });
      console.log(res);
      tagList.value = res.data;
    };

    // 获取数据
    const { trigger: getTagList, loading } = useAsyncLoading(handleGetTagList);
    getTagList();

    return { loading, tagList };
  },
});
</script>

<style scoped lang="scss">
h2 {
  margin: 0;
  text-align: center;
}
:deep(.tagtag) {
  margin-top: 10px;
  padding: 4px 8px;
  font-size: 16px;
  cursor: pointer;
  > span {
    vertical-align: middle;
  }
  .ant-badge-count {
    background: #4e6ef2;
  }
}
</style>
